<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 依赖包引入:2.6 -->
    <script src="./js/vue.js"></script>
</head>
<body>
     <!-- 容器（模板）:展示内容区域 -->
     <div class="app">
          <!-- 顶部有三个按钮 -->
          <button @click=" handler('游戏') ">游戏</button>
          <button @click=" handler('直播') ">直播</button>
          <button @click=" handler('军事') ">军事</button>
          <!-- 底部内容：三部分 
               三者只能选其一，显示与隐藏
               v-if|v-show
          -->
          <!-- 
              指令右侧双引号：并非字符串，它只是语法的要求，双引号里面可以放置JS语法
              指令右侧双引号，以后书写内容的时候，左右两边给我留两个空格
          -->
          <ul v-show=" show==='游戏'  ">
              <li>游戏LOL</li>
              <li>游戏王者荣耀</li>
              <li>吃鸡</li>
          </ul>
          <ul v-show=" show==='直播' ">
              <li>直播:1</li>
              <li>直播:2</li>
              <li>直播:3</li>
          </ul>
          <ul v-show=" show==='军事' ">
              <li>坦克</li>
              <li>航母</li>
              <li>AK47</li>
          </ul>
     </div>
</body>
</html>
<script>
    //创建VM实例与容器（模板进行关联）
    //Vue是一个构造函数-类
    let VM = new Vue({
         el:'.app',
        //响应式数据->数据发生变化，视图会跟着变化的
         data:{
           show:'游戏'
         }
         ,
         //实例的方法
         methods: {
             //相应的事件处理函数
             //一定是需要传递参数，为了区分点击的是谁，相应修改show数值
             handler(params){
               //修改show相应的数值
               //event操作：event一般获取触发事件节点，event.target
               //或者获取鼠标位置offsetX|offsetY、pageX|pageY、clinetX|clientY等等
               this.show = params;
             }
         },
    });
    //总结：无非通过响应式属性show去动态展示相应的内容
    //而且需要注意，目前是三个内容进行切换，选择用字符串区分，别想到布尔值
    //因为布尔值只有两个true|false
</script>